<template>
    <div>
        <div id="outter-box">
            <div id="inner-box" ref="inner"></div>
        
        </div>
        <p>{{ date | dateFormate }}</p>
    </div>
</template>

<script>

export default {
    name: "Test-Dom",
    data() {
        return {
            date: new Date(),
        }
    },
    // 过滤器
    filters: {
        dateFormate(val) {
            let year = val.getFullYear();
            let month = val.getMonth() + 1;
            let date = val.getDate();
            return `今天是 ${year} 年 ${month} 月 ${date} 日`
        }
    },
    mounted: function(){
        const inner = this.$refs.inner;
        const style = window.getComputedStyle(inner);
        console.log(style.height)
    }
}
    
</script>

<style>
    #outter-box {
        height: 200px;
        width: 200px;
        background-color: bisque;
        position: relative;
    }

    #inner-box {
        position: relative;
        height: 100px;
        width: 100px;
        background-color: aqua;
        translate: 50px 50px;
    }
</style>